<template>
  <div class="app-container">
    <div class="hander_info">
      <div class="hander_item">
        <div>
          <img class="index_icon" src="../assets/common/index/visit.png" alt="" srcset="">
        </div>
        <div class="title">
          <el-statistic title="访问量" :value="visitVolume" />
        </div>

      </div>

      <div class="hander_item">
        <div>
          <img class="index_icon" src="../assets/common/index/used_count.png" alt="" srcset="">
        </div>
        <div class="title">
          <el-statistic title="用户量" :value="userVolume" />
        </div>
      </div>

      <div class="hander_item">
        <div>
          <img class="index_icon" src="../assets/common/index/exam_count.png" alt="" srcset="">
        </div>
        <div class="title">
          <el-statistic title="文章数" :value="articleVolume" />
        </div>
      </div>

      <div class="hander_item">
        <div>
          <img class="index_icon" src="../assets/common/index/question_count.png" alt="" srcset="">
        </div>
        <div class="title">
          <el-statistic title="视频数" :value="videoVoulme" />
        </div>
      </div>
    </div>
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <template #header>
             <span
              style="vertical-align: middle;">文章阅读量</span>
          </template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="articleReadStat" style="height: 420px" />
          </div>
          
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" class="card-box">
        <el-card>
          <template #header>
            <span style="vertical-align: middle;">近7天访问量</span>
          </template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="bgVisitStat" style="height: 420px" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="8" class="card-box">
        <el-card>
          <template #header><span style="vertical-align: middle;">用户访问来源</span></template>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="visitFromStat" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
  </div>
</template>

<script setup name="Index">
import * as echarts from 'echarts';
// 引入动态值变化
import { useTransition } from '@vueuse/core'
import { getTopData, getBgVisit, getVisitFrom, getArticleReadVolume } from '@/api/report/index';
// 后台访问量
const bgVisitStat = ref(null);
// 访问来源
const visitFromStat = ref(null);
// 文章阅读量
const articleReadStat = ref(null);

const { proxy } = getCurrentInstance();

const visitCount = ref(0)
const userCount = ref(0)
const articleCount = ref(0)
const videoCount = ref(0)

const visitVolume = useTransition(visitCount, {
  duration: 1000,
})
const userVolume= useTransition(userCount, {
  duration: 1000,
})
const articleVolume = useTransition(articleCount, {
  duration: 1000,
})
const videoVoulme = useTransition(videoCount, {
  duration: 1000,
})

function getList() {
  // 获取头部数据
  getTopData().then(resp => {
    visitCount.value = Number(resp.data.visitVolume);
    userCount.value = Number(resp.data.userVolume);
    articleCount.value = Number(resp.data.articleVolume);
    videoCount.value = Number(resp.data.videoVoulme);
  })

  // 访问来源
  getVisitFrom().then(resp => {
      let data = [];
      for (const item of resp.data) {
        data.push({ value: item.value, name: item.label });
      }
      const visitFromStatInstance = echarts.init(visitFromStat.value, "macarons");
      visitFromStatInstance.setOption({
        title: {
          text: '用户访问来源',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '详情',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
      window.addEventListener("resize", () => {
        visitFromStatInstance.resize();
      });
    })
  //后台访问折线图
  getBgVisit().then(resp => {
      
      const bgVisitStatInstance = echarts.init(bgVisitStat.value, "macarons");
      let xAxisData = [];
      let seriesData = [];
      for (const item of resp.data) {
        xAxisData.push(item.label);
        seriesData.push(item.value);
      }
      bgVisitStatInstance.setOption({
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: seriesData,
            type: 'line'
          }
        ]
      })
      window.addEventListener("resize", () => {
        bgVisitStatInstance.resize();
      });
    })
    // 文章阅读量柱状图
    getArticleReadVolume().then(resp => {
      let xAxisData = [];
      let seriesData = [];
      for (const item of resp.data) {
        xAxisData.push(item.label);
        seriesData.push(item.value);
      }
      const articleReadStatInstance = echarts.init(articleReadStat.value, "macarons");
      articleReadStatInstance.setOption({
        xAxis: {
          type: 'category',
          data: xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: seriesData,
            type: 'bar'
          }
        ]
      })
      window.addEventListener("resize", () => {
        articleReadStatInstance.resize();
      });
    })
}

getList();
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f3f3f5;
  min-height: calc(100vh - 84px);
}

.hander_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  margin: 15px;

  .hander_item {
    display: flex;
    justify-content: start;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 5px;
    width: 390px;
    height: 115px;
    background-color: #fff;

    .index_icon {
      width: 50px;
      height: 50px;
    }

    .title {
      margin-left: 30px;
    }
  }
}
</style>
